<template>
	<view class="w-picker-view">
		<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
			<picker-view-column v-for="(group,gIndex) in range" :key="gIndex">
				<view class="w-picker-item" v-for="(item,index) in group" :key="index">{{item[nodeKey]}}</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pickVal: [],
				range: [],
				checkObj: {}
			};
		},
		props: {
			itemHeight: {
				type: String,
				default: "44px"
			},
			value: {
				type: [Array, String],
				default: ""
			},
			defaultType: {
				type: String,
				default: "label"
			},
			options: {
				type: Array,
				default () {
					return []
				}
			},
			defaultProps: {
				type: Object,
				default () {
					return {
						lable: "label",
						value: "value",
						children: "children"
					}
				}
			},
			level: {
				//多级联动层级，表示几级联动
				type: [Number, String],
				default: 2
			}
		},
		computed: {
			nodeKey() {
				return this.defaultProps.label;
			},
			nodeVal() {
				return this.defaultProps.value;
			},
			nodeChild() {
				return this.defaultProps.children;
			}
		},
		watch: {
			value(val) {
				if (this.options.length != 0) {
					this.initData();
				}
			},
			options(val) {
				this.initData();
			}
		},
		created() {
			if (this.options.length != 0) {
				this.initData();
			}
		},
		methods: {
			getData() {
				//用来处理初始化数据
				let options = this.options;
				let col1 = {},
					col2 = {},
					col3 = {},
					col4 = {};
				let arr1 = options,
					arr2 = [],
					arr3 = [],
					arr4 = [];
				let col1Index = 0,
					col2Index = 0,
					col3Index = 0,
					col4Index = 0;
				let a1 = "",
					a2 = "",
					a3 = "",
					a4 = "";
				let dVal = [],
					obj = {};
				let value = this.value;
				let data = [];
				a1 = value[0];
				a2 = value[1];
				if (this.level > 2) {
					a3 = value[2];
				}
				if (this.level > 3) {
					a4 = value[3];
				};
				/*第1列*/
				col1Index = arr1.findIndex((v) => {
					return v[this.defaultType] == a1
				});
				col1Index = value ? (col1Index != -1 ? col1Index : 0) : 0;
				col1 = arr1[col1Index];

				/*第2列*/
				arr2 = JSON.stringify(arr1[col1Index][this.nodeChild]) ? arr1[col1Index][this.nodeChild] : [{}];
				col2Index = arr2.findIndex((v) => {
					return v[this.defaultType] == a2
				});
				col2Index = value ? (col2Index != -1 ? col2Index : 0) : 0;
				col2 = arr2[col2Index];

				/*第3列*/
				if (this.level > 2) {
					arr3 = JSON.stringify(arr2[col2Index][this.nodeChild]) ? arr2[col2Index][this.nodeChild] : [{}];
					col3Index = arr3.findIndex((v) => {
						return v[this.defaultType] == a3;
					});
					col3Index = value ? (col3Index != -1 ? col3Index : 0) : 0;
					col3 = arr3[col3Index];
				};


				/*第4列*/
				if (this.level > 3) {
					arr4 = JSON.stringify(arr3[col4Index][this.nodeChild]) ? arr3[col4Index][this.nodeChild] : [{}];
					col4Index = arr4.findIndex((v) => {
						return v[this.defaultType] == a4;
					});
					col4Index = value ? (col4Index != -1 ? col4Index : 0) : 0;
					col4 = arr4[col4Index];
				};
				switch (this.level * 1) {
					case 2:
						dVal = [col1Index, col2Index];
						obj = {
							col1,
							col2
						}
						data = [arr1, arr2];
						break;
					case 3:
						dVal = [col1Index, col2Index, col3Index];
						obj = {
							col1,
							col2,
							col3
						}
						data = [arr1, arr2, arr3];
						break;
					case 4:
						dVal = [col1Index, col2Index, col3Index, col4Index];
						obj = {
							col1,
							col2,
							col3,
							col4
						}
						data = [arr1, arr2, arr3, arr4];
						break
				}
				return {
					data,
					dVal,
					obj
				}
			},
			initData() {
				let dataData = this.getData();
				let data = dataData.data;
				let arr1 = data[0];
				let arr2 = data[1];
				let arr3 = data[2] || [];
				let arr4 = data[3] || [];
				let obj = dataData.obj;
				let col1 = obj.col1,
					col2 = obj.col2,
					col3 = obj.col3 || {},
					col4 = obj.col4 || {};
				let result = "",
					value = [];
				let range = [];
				switch (this.level) {
					case 2:
						value = [col1[this.nodeVal], col2[this.nodeVal]];
						result = `${col1[this.nodeKey]+col2[this.nodeKey]}`;
						range = [arr1, arr2];
						break;
					case 3:
						value = [col1[this.nodeVal], col2[this.nodeVal], col3[this.nodeVal]];
						result = `${col1[this.nodeKey]+col2[this.nodeKey]+col3[this.nodeKey]}`;
						range = [arr1, arr2, arr3];
						break;
					case 4:
						value = [col1[this.nodeVal], col2[this.nodeVal], col3[this.nodeVal], col4[this.nodeVal]];
						result = `${col1[this.nodeKey]+col2[this.nodeKey]+col3[this.nodeKey]+col4[this.nodeKey]}`;
						range = [arr1, arr2, arr3, arr4];
						break;
				}
				this.range = range;
				this.checkObj = obj;
				this.$nextTick(() => {
					this.pickVal = dataData.dVal;
				});
				this.$emit("change", {
					result: result,
					value: value,
					obj: obj
				})
			},
			handlerChange(e) {
				let arr = [...e.detail.value];
				let col1Index = arr[0],
					col2Index = arr[1],
					col3Index = arr[2] || 0,
					col4Index = arr[3] || 0;
				let arr1 = [],
					arr2 = [],
					arr3 = [],
					arr4 = [];
				let col1, col2, col3, col4, obj = {};
				let result = "",
					value = [];
				arr1 = this.options;

				arr2 = (arr1[col1Index] && arr1[col1Index][this.nodeChild]) || arr1[arr1.length - 1][this.nodeChild] || [{}];

				col1 = arr1[col1Index] || arr1[arr1.length - 1] || {};
				col2 = arr2[col2Index] || arr2[arr2.length - 1] || {};
				if (this.level > 2) {
					arr3 = (arr2[col2Index] && arr2[col2Index][this.nodeChild]) || arr2[arr2.length - 1][this.nodeChild]|| [{}];
					col3 = arr3[col3Index] || arr3[arr3.length - 1] || {};
				}
				if (this.level > 3) {
					arr4 = (arr3[col3Index] && arr3[col3Index][this.nodeChild]) || arr3[arr3.length - 1][this.nodeChild] || [{}];
					col4 = arr4[col4Index] || arr4[arr4.length - 1] || {};
				}
				switch (this.level) {
					case 2:
						obj = {
							col1,
							col2
						}
						this.range = [arr1, arr2];
						result = `${(col1[this.nodeKey]||'')+(col2[this.nodeKey]||'')}`;
						value = [col1[this.nodeVal] || '', col2[this.nodeVal] || ''];
						break;
					case 3:
						obj = {
							col1,
							col2,
							col3
						}
						this.range = [arr1, arr2, arr3];
						result = `${(col1[this.nodeKey]||'')+(col2[this.nodeKey]||'')+(col3[this.nodeKey]||'')}`;
						value = [col1[this.nodeVal] || '', col2[this.nodeVal] || '', col3[this.nodeVal] || ''];
						break;
					case 4:
						obj = {
							col1,
							col2,
							col3,
							col4
						}
						this.range = [arr1, arr2, arr3, arr4];
						result =
							`${(col1[this.nodeKey]||'')+(col2[this.nodeKey]||'')+(col3[this.nodeKey]||'')+(col4[this.nodeKey]||'')}`;
						value = [col1[this.nodeVal] || '', col2[this.nodeVal] || '', col3[this.nodeVal] || '', col4[this
							.nodeVal] || ''];
						break;
				}
				this.checkObj = obj;
				this.pickVal = arr;
				this.$emit("change", {
					result: result,
					value: value,
					obj: obj
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "./w-picker.css";
</style>